import React from "react";
import { render } from "react-dom";
import "./index.css";
import App from "./Components/App";
import { createStore, compose, combineReducers } from "redux";
import { Provider } from "react-redux";
import todoApp from "./Reducer/index";
import { HashRouter as Router, Route, NavLink, Link } from "react-router-dom"; // BrowerRouter as Router
import { MemoryRouter } from "react-router"; //内存路由，URL不发生变化

import { CounterApp as C0_counter } from "./c0_redux_file_architecture/counter/App";
import C1 from "./c1/pureRedux";
import C2 from "./c2/reduxReact";

import DevTools from "./Containers/DevTools"; //引入开发调试工具
import registerServiceWorker from "./registerServiceWorker";

// const enhancer = DevTools.instrument();
// const store = createStore(todoApp, enhancer);//创建store,store.dispatch方法会触发 Reducer 的自动执行。
// 为此，Store 需要知道 Reducer 函数，做法就是在生成 Store 的时候，将 Reducer 传入createStore方法。

const store = createStore(todoApp);
const rootDom = document.getElementById("root");

const About = ({ match }) => (
  <div className="About">
    About-Route=
    {JSON.stringify(match)}
  </div>
);
const Blog = ({ match }) => (
  <div className="Blog">
    Blog-Route.params=
    {JSON.stringify(match)}
  </div>
);

// 一级topic
const Topics = ({ match }) => (
  <div className="Topic">
    <h3>主题类别</h3>
    <ul className="navs">
      <li>
        <MyLink label="movie" to={`${match.url}/movie`}>
          电影
        </MyLink>
      </li>
      <li>
        <MyLink label="food" to={`${match.url}/food`}>
          美食
        </MyLink>
      </li>
      <li>
        <MyLink label="trip" to={`${match.url}/trip`}>
          旅游
        </MyLink>
      </li>
      <li>
        <MyLink Exact={true} label="gaming" to={`${match.url}/gaming`}>
          游戏竞技
        </MyLink>
      </li>
    </ul>
    <Route exact path={`${match.url}`} render={() => <p>请选择一个主题。</p>} />
    <Route path={`${match.url}/:topicId`} component={subTopic} />
  </div>
);

// 二级topic
const subTopic = ({ match }) => (
  <div>
    Let's {match.params.topicId}
    <ul>
      <li>
        <MyLink label="subcate 1" to={`${match.url}/1`} />
      </li>
      <li>
        <MyLink label="subcate 2" to={`${match.url}/2`} />
      </li>
      <li>
        <MyLink label="subcate 3" to={`${match.url}/3`} />
      </li>
    </ul>
  </div>
);

/**
 * 自定义路由Link
 * @param label
 * @param to
 * @returns {*}
 * @constructor
 */
const MyLink = ({ Exact, label, to }) => (
  <Route
    exact={Exact}
    path={to}
    children={({ match }) => (
      <div className={match ? "active_router" : ""}>
        {match ? ">" : ""}
        <Link to={to}>{label}</Link>
      </div>
    )}
  />
);

render(
  <Provider store={store}>
    <Router>
      <div className="page">
        {/* <DevTools /> */}
        <ul className="menus">
          {/*<li><NavLink to="/" activeClassName="active_link">Home</NavLink></li>*/}
          <li>
            <MyLink Exact={true} label="Home" to="/">
              Home
            </MyLink>
          </li>
          <li>
            <MyLink Exact={true} label="Blog" to="/blog" />
          </li>
          <li>
            <MyLink Exact={true} label="About" to="/about" />
          </li>
          <li>
            <MyLink Exact={false} label="Topics" to="/topics" />
          </li>
          <li>
            <MyLink
              Exact={true}
              label="C0-redux-file-arch-counter"
              to="/C0_counter"
            />
          </li>
          <li>
            <MyLink Exact={true} label="C1-pureRedux" to="/c1" />
          </li>
          <li>
            <MyLink Exact={true} label="C2-redux-React" to="/c2" />
          </li>
        </ul>
        <div className="content">
          <Route exact path="/" component={App} />
          <Route path="/blog" component={Blog} />
          <Route path="/about" component={About} />
          <Route path="/topics" component={Topics} />
          <Route path="/c1" component={C1} />
          <Route path="/c2" component={C2} />
          <Route path="/C0_counter" component={C0_counter} />
        </div>
      </div>
    </Router>
  </Provider>,
  rootDom
);
registerServiceWorker();
